<template>
  <div class="outer-container">
    <div class="container">
      <el-container>
        <el-header style="padding: 0;">
          <div class="nav-list">
            <navigation/>
          </div>
        </el-header>
        <el-main class="main-content">
          <div class="page-header">
            <div class="page-title">
              <h1>电影库</h1>
            </div>
            <div class="header-stats">
              <div class="stat-item">
                <i class="fas fa-film"></i>
                <span>共{{ total }}部影片</span>
              </div>
              <div class="stat-item">
                <i class="fas fa-eye"></i>
                <span>今日更新12部</span>
              </div>
            </div>
          </div>

          <!-- 分类区域 -->
          <div class="filter-container">
            <div class="filter-header">
              <i class="fas fa-filter"></i>
              <span>筛选条件</span>
            </div>
            <!-- 类型 Section -->
            <div class="category-section">
              <el-text class="section-title">
                <i class="fas fa-film"></i>
                类型
              </el-text>
              <div class="options-wrapper">
                <a v-for="(type, index) in types" :key="index" 
                   :class="{ selected: type.selected }" 
                   @click="toggleSelection(types, type,'type')">
                  {{ type.name }}
                </a>
              </div>
            </div>

            <!-- 剧情 Section -->
            <div class="category-section">
              <el-text class="section-title">
                <i class="fas fa-theater-masks"></i>
                剧情
              </el-text>
              <div class="options-wrapper">
                <a v-for="(genre, index) in genres" :key="index" 
                   :class="{ selected: genre.selected }" 
                   @click="toggleSelection(genres, genre,'genre')">
                  {{ genre.name }}
                </a>
              </div>
            </div>

            <!-- 地区 Section -->
            <div class="category-section">
              <el-text class="section-title">
                <i class="fas fa-globe-asia"></i>
                地区
              </el-text>
              <div class="options-wrapper">
                <a v-for="(region, index) in regions" :key="index" 
                   :class="{ selected: region.selected }" 
                   @click="toggleSelection(regions, region,'region')">
                  {{ region.name }}
                </a>
              </div>
            </div>

            <!-- 年份 Section -->
            <div class="category-section">
              <el-text class="section-title">
                <i class="fas fa-calendar-alt"></i>
                年份
              </el-text>
              <div class="options-wrapper">
                <a v-for="(year, index) in years" :key="index" 
                   :class="{ selected: year.selected }" 
                   @click="toggleSelection(years, year,'year')">
                  {{ year.name }}
                </a>
              </div>
            </div>
          </div>

          <!-- 剧集列表 -->
          <div class="drama-sections">
            <div class="drama-list">
              <div v-for="(drama, index) in shortDramas" 
                   :key="index" 
                   class="drama-card" 
                   @click="goToDramaDetail(drama.detailsId,drama.name)">
                <div class="image-wrapper">
                  <img :src="drama.cover" :alt="drama.name" class="drama-image">
                  <div class="play-button">
                    <i class="fas fa-play"></i>
                  </div>
                  <div class="drama-info">
                    <h3>{{ drama.name }}</h3>
                    <div class="drama-meta">
                      <span class="rating">
                        <i class="fas fa-star"></i>
                        9.2
                      </span>
                      <span class="year">
                        <i class="fas fa-calendar"></i>
                        2024
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[36,42,48,54,60,66]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

  <script setup>
  import Navigation from "@/components/navigation.vue";
  
  import { ref,onMounted,watch } from 'vue';
  import request from "@/utils/request";
  import { useRouter } from 'vue-router';
  import '@fortawesome/fontawesome-free/css/all.css'; // 在 JavaScript 文件中引入
  const types = ref([]);
const years = ref([]);
const genres = ref([]);
const regions = ref([]);
  const pageNum = ref(1);
  const selectedType = ref(null); // 用于保存选中的类型
const selectedGenre = ref(null); // 保存选中的剧情
const selectedRegion = ref(null); // 保存选中的地区
const selectedYear = ref(null); // 保存选中的年份
const pageSize = ref(40);
const total = ref(0);
  const sort=ref('逆袭')
  const category=ref('综艺')
  const userName=localStorage.getItem('userName')
  const indicate=ref('/counterattack')
  // Reactive data for short dramas
  const shortDramas = ref([]);
  // Method to fetch short drama data asynchronously
  // 分类数据
  const regionsList = () => {
  // 直接使用静态数据替代请求
  regions.value = [
    { name: '全部' ,selected: true},
    { name: '港台'},
    { name: '日韩'},
    { name: '欧美'},
  ];
};

const typesList =()=>{
  types.value = [
  {name: '全部', selected:true},
    {name: '大陆综艺'},
    {name: '大陆综艺'},
    {name: '大陆综艺'},
    {name: '大陆综艺'}
  ]
}

const storyList =()=>{
  genres.value = [
  {name: '全部', selected:true},
    {name: '选秀'},
    {name: '情感'},
    {name: '访谈'},
    {name: '旅游'},
    {name: '音乐'},
    {name: '美食'},
    {name: '纪实'},
    {name: '曲艺'},
    {name: '求职'},
    {name: '生活'},
    {name: '游戏互娱'},
    {name: '财经'},
  ]
}

// 切换选中状态
const toggleSelection = (category, item,selectedValue) => {
  console.log('---',category,"---",item,"--",selectedValue);
  
  category.forEach((option) => {
    option.selected = false; // 取消其他选项的选中状态
  });
  item.selected = true; // 设置当前点击的选项为选中


  // 将选中的值赋给相应的变量
  if (selectedValue === 'type') {
    selectedType.value = item.name;
  } else if (selectedValue === 'genre') {
    selectedGenre.value = item.name;
  } else if (selectedValue === 'region') {
    selectedRegion.value = item.name;
  } else if (selectedValue === 'year') {
    selectedYear.value = item.name;
  }

  loadShortDramas(); // 直接调用加载剧集数据
  
  

};

  const handleSizeChange = (val) => {
  pageSize.value = val;
  loadShortDramas();
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  loadShortDramas();
};

const yearsList = async() =>{
  const res=await request.get('/genre/yearFinAll')
  years.value=res.data.data;
}


  const loadShortDramas = async () => {
    try {
      // Fetch short drama data
      const res = await request.get("/details/varietyPage",{
        params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        category: category.value || '',
        type: selectedType.value || '', // 如果未选中类型，传递空字符串
        genre: selectedGenre.value || '', // 如果未选中剧情，传递空字符串
        country: selectedRegion.value || '', // 如果未选中地区，传递空字符串
        year: selectedYear.value || '' // 如果未选中年份，传递空字符串
      }
      });
      shortDramas.value=res.data.data.records || [];
      total.value=res.data.data.total || 0;
    }catch(error){
      console.error("error",error);
    }
  };
  
  // Router instance
  const router = useRouter();
  
  // Method to navigate to drama detail page
  const goToDramaDetail = (detailsId,name) => {
     //模拟视频点击
    request.post(`/news/click/${detailsId}`)
    request.post('/news/click/',{
    id: detailsId,
    username: userName
  })

    console.log("---",detailsId);
    console.log("-namr--",name);
    // Navigate to the detail page and pass drama ID as route parameter
    // router.push({ name: 'VideoStory', params: { id: dramaId ,name: name,sort: sort.value,indicate: indicate.value} });
    router.push({name: 'VideoStory',params: {id: detailsId,name:name,sort: sort.value,indicate: indicate.value}})
  };

  onMounted(()=>{
    typesList();
    yearsList();
    storyList();
    regionsList();
      // 默认选中 "全部"
  // 默认选中 "全部"
  // 监听 types 数据加载完成后，执行默认选中逻辑
  watch(types, (newTypes) => {
    if (newTypes.length) {
      newTypes[0].selected = true;
      selectedType.value = newTypes[0].name; // 确保选中类型为 "全部"
      loadShortDramas(); // 加载剧集数据
    }
  });

  // 监听 genres 数据加载完成后，执行默认选中逻辑
  watch(genres, (newGenres) => {
    if (newGenres.length) {
      newGenres[0].selected = true;
      selectedGenre.value = newGenres[0].name;
      loadShortDramas(); // 加载剧集数据
    }
  });

  // 监听 regions 数据加载完成后，执行默认选中逻辑
  watch(regions, (newRegions) => {
    if (newRegions.length) {
      newRegions[0].selected = true;
      selectedRegion.value = newRegions[0].name;
      loadShortDramas(); // 加载剧集数据
    }
  });

  // 监听 years 数据加载完成后，执行默认选中逻辑
  watch(years, (newYears) => {
    if (newYears.length) {
      newYears[0].selected = true;
      selectedYear.value = newYears[0].name;
      loadShortDramas(); // 加载剧集数据
    }
  });

  });
  </script>
  <style scoped>
  .outer-container {
    min-height: 100vh;
    background: #f5f7fa;
    width: 100%;
  }

  .container {
    width: 100%;
    margin: 0 auto;
    padding: 65px 0 40px;
  }

  .main-content {
    background-color: #fff;
    padding: 10px 78px;
    min-height: calc(100vh - 65px);
  }

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f2f5;
  }

  .page-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .page-title h1 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
  }

  .page-title::after {
    content: '';
    display: block;
    width: 3px;
    height: 24px;
    background: #e50914;
    margin-left: 5px;
  }

  .header-decoration {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-stats {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
  }

  .stat-item i {
    color: #e50914;
    font-size: 16px;
  }

  .filter-container {
    background: #fff;
    border-radius: 12px;
    padding: 20px 30px;
    margin-bottom: 30px;
    border: 1px solid #e4e7ed;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    position: relative;
  }

  .filter-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #e50914;
    border-radius: 4px 0 0 4px;
  }

  .filter-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
  }

  .filter-header i {
    color: #e50914;
    font-size: 16px;
  }

  .filter-header span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .category-section {
    margin-bottom: 18px;
    position: relative;
    display: flex;
    align-items: flex-start;
  }

  .section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-right: 25px;
    min-width: 75px;
    white-space: nowrap;
  }

  .section-title i {
    color: #e50914;
    font-size: 14px;
  }

  .options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
  }

  .category-section a {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 15px;
    background: #fff;
    color: #666;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .category-section a:hover {
    color: #e50914;
    border-color: #e50914;
    background: #fff;
    box-shadow: 0 2px 6px rgba(229, 9, 20, 0.1);
  }

  .category-section a.selected {
    background: #e50914;
    color: white;
    border-color: #e50914;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(229, 9, 20, 0.2);
  }

  .drama-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    padding: 20px 0;
  }

  .drama-card {
    transition: all 0.3s ease;
    position: relative;
  }

  .drama-card:hover {
    transform: translateY(-5px);
  }

  .image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 150%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .drama-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .drama-card:hover .drama-image {
    transform: scale(1.05);
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: #e50914;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .drama-card:hover .play-button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .play-button i {
    color: white;
    font-size: 20px;
  }

  .drama-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s ease;
  }

  .drama-card:hover .drama-info {
    transform: translateY(0);
    opacity: 1;
  }

  .drama-info h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }

  .drama-meta {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 12px;
  }

  .drama-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .drama-meta i {
    color: #ffd700;
    font-size: 12px;
  }

  .pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }

  .nav-list {
    position: fixed;
    top: 0;
    padding: 0px;
    left: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
    }
  }

  :deep(.el-pagination) {
    --el-pagination-bg-color: #fff;
    --el-pagination-text-color: #606266;
    --el-pagination-button-color: #606266;
    --el-pagination-button-bg-color: #fff;
    --el-pagination-button-disabled-color: #c0c4cc;
    --el-pagination-button-disabled-bg-color: #fff;
    --el-pagination-hover-color: #e50914;
  }

  :deep(.el-pagination .el-pager li) {
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
  }

  :deep(.el-pagination .el-pager li.active) {
    background: #e50914;
    color: #fff;
    border-color: #e50914;
  }

  :deep(.el-select-dropdown) {
    background: #fff;
    border: 1px solid #dcdfe6;
  }

  :deep(.el-select-dropdown__item) {
    color: #606266;
  }

  :deep(.el-select-dropdown__item.hover) {
    background: #f5f7fa;
  }

  :deep(.el-select-dropdown__item.selected) {
    color: #e50914;
    background: #fff;
  }
  </style>